<!--
组件的生命周期:
  【时刻】                  【调用特定的函数】
- 创建 (创建前, 创建完毕)     beforeCreate, created
- 挂载 (挂载前, 挂载完毕)     beforeMount, mounted
- 更新 (更新前, 更新完毕)     beforeUpdate, updated
- 销毁 (销毁前, 销毁完毕)     beforeDestroy, destroyed

钩子 ==> 生命周期函数

组件的生命周期: 在特定的时刻, 调用特定的函数.
生命周期、生命周期函数、生命周期钩子
-->
<template>
  <div class="person">
    <h2>当前求和为: {{ sum }}</h2>
    <button @click="add">点我 sum + 1</button>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line
  name: 'Person',
  // 数据
  data() {
    return {
        sum: 1,
    }
  },
  // 方法
  methods: {
    add() {
      this.sum += 1
    }
  },
  // 创建前的钩子
  beforeCreate() {
    console.log('创建前')
  },
  // 创建完毕的钩子
  created() {
    console.log('创建完毕')
  },
  // 挂载前
  beforeMount() {
    console.log('挂载前')
    // eslint-disable-next-line
    // debugger
  },
  // 挂载完毕
  mounted() {
    console.log('挂载完毕')
  },
  // 更新前
  beforeUpdate() {
    console.log('更新前')
  },
  // 更新完毕
  updated() {
    console.log('更新完毕')
  },
  // 销毁前
  beforeDestroy() {
    console.log('销毁前')
  },
  // 销毁完毕
  destroyed() {
    console.log('销毁完毕')
  }
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>
